<template>
  <div>
    <div
      class="chat-toggle"
      @click="toggleChatWindow"
    >
    </div>
    <div
      v-if="true"
      class="chat-window"
    >
      <VueBotUI
      :options="botOptions"
      :messages="messageData"
      :bot-typing="botTyping"
      :input-disable="inputDisable"
      :is-open="false"
      @init="botStart"
      @msg-send="msgSend"
      />
    </div>
  </div>
</template>

<script>
import ChatWindow from '../components/chat/chatrebot.vue';
import { VueBotUI } from 'vue-bot-ui'
import {rebotMessage} from "@/api/system/rebotMessage";
import iconHead from '@/assets/icons/bot.png'
export default {
  components: {
    ChatWindow,VueBotUI,iconHead
  },
  data() {
    return {
      isChatOpen: false,
      messageData: [],
      botTyping: false,
      inputDisable: false,
      botOptions: {
        botAvatarImg: iconHead,
        boardContentBg: '#f4f4f4',
        msgBubbleBgBot: '#fff',
        inputPlaceholder: '很高兴为你服务，请描述您的问题',
        inputDisableBg: '#fff',
        inputDisablePlaceholder: 'Hit the buttons above to respond'
      }
    };
  },
  methods: {
    toggleChatWindow() {
      this.isChatOpen = !this.isChatOpen;
    },
    botStart () {
      this.botTyping = true
      setTimeout(() => {
        this.botTyping = false
        let requestData='ceshi'
        let requestDataJson = { message: requestData }
        this.processMessage(requestDataJson)
      }, 1000)
    },

    msgSend (value) {
      // Push the user's message to board
      this.messageData.push({
        agent: 'user',
        type: 'text',
        text: value.text
      })

      this.processMessage(value.text)
    },

    // Submit the message from user to bot API, then get the response from Bot
    getResponse () {
      // Loading
      this.botTyping = true

      // Post the message from user here
      // Then get the response as below

      // Create new message from fake data
      messageService.createMessage()
        .then((response) => {
          const replyMessage = {
            agent: 'bot',
            ...response
          }

          this.inputDisable = response.disableInput
          this.messageData.push(replyMessage)

          // finish
          this.botTyping = false
        })
    },
    processMessage(requestData) {
      let requestDataJson = { message: requestData }
      // 调用后端API处理消息
      rebotMessage(requestDataJson).then(response => {
        const robotResponse = response.msg;
        this.messageData.push({
          agent: 'bot',
          type: 'text',
          text: robotResponse
        });
      });
    }
  }
};
</script>

<style scoped>

/* 基本样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  position: relative;
}

/* 悬浮窗按钮样式 */
.chat-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background-color: #007bff;
  color: white;
  font-size: 24px;
  text-align: center;
  line-height: 60px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.chat-toggle:hover {
  transform: scale(1.1);
}


</style>
